<template>
  <div class="change-class body-bg">
    <!-- 课程详情 -->
    <div class="change-items">
      <div class="top">
        <div class="head-name">
          <img class="head-img" :src="child_photo || '/static/images/user.png'" alt="头像">
          <p class="name">{{child_name}}</p>
        </div>
        <div class="class-infor">
          <p class="class-name overflow-tow">{{goods_name}}</p>
          <p>校区：{{campus_address}}</p>
          <p>教练：{{teacher_name}}</p>
        </div>
      </div>
    </div>
    <!-- 选择请假课次 -->
    <div class="qingjia-select" @click="goSelect">
      <p class="title">选择请假课次  <span class="tip" v-if="selectesNum">（已选{{selectesNum}}次课）</span></p>
      <p class="tip">请选择 <van-icon name="arrow" color="#BEC2CD" /></p>
    </div>
    <!-- 评语 -->
    <div class="pingyu">
      <p class="title">请假事由</p>
      <van-field
        :readonly="readonly"
        :value="reason"
        type="textarea"
        placeholder="请输入请假缘由~"
        autosize
        border="false"
        @change="changeMeg"
      />
    </div>
    <!-- submit -->
    <div class="submit-btn">
      <van-button v-if="!loadingBtn" color="#00B8EE" block @click="submitForm">确认请假</van-button>
      <van-button v-else disabled="true" :loading="loadingBtn" loading-text="请假中..." color="#00B8EE" block></van-button>
    </div>
    <!-- 通知对应的节点容器 -->
    <van-notify id="van-notify" />
  </div>
</template>

<script>
import Ls from '@/utils/storage'
import Notify from '../../../static/vant/notify/notify';
export default {
  data() {
    return {
      loadingBtn: false,
      goods_id: "", // 接受url传递goods_id
      goods_name: "", // 接受url传递的goods_name
      campus_address: "", // 接受url传递的campus_address
      teacher_name: "", // 接受url传递的teacher_name
      selectesNum: "", // 已选课次数
      reason: "", // 请假原因
      start_date: "", // 开始时间
      end_date: "", // 结束时间
      lesson_ids: "", // 课次ID,多个以逗号隔开
      leave_dates: "", // 请假时间,多个以逗号隔开，和请假课次一一对应
      child_photo: Ls.getItem("childInfor").child_photo,
      child_name: Ls.getItem("childInfor").child_name,
    }
  },
  onLoad(e) {
    console.log(e)
    this.selectesNum = 0;
    this.reason = "";
    this.goods_id = e.goods_id;
    this.goods_name = e.goods_name;
    this.campus_address = e.campus_address;
    this.teacher_name = e.teacher_name;
    this.sub_order_id = e.sub_order_id;
  },
  onShow() {
    let sureList = Ls.getItem("sureList");

    if(!sureList) return;
    let selectList = sureList.filter(item=> item.is_leave == 1);
    this.selectesNum = selectList.length;

    // 获取请假课次ID，多个以逗号隔开
    // 获取请假时间，多个以逗号隔开，和请假课次id一一对应
    // 获取开始/结束时间
    let lesson_idsList = [];
    let leave_datesList = [];
    let arry_dates = [];
    sureList.filter(item=> {
      if (item.is_leave == 2) return;
      lesson_idsList.push(item.lesson_id)
      leave_datesList.push(item.open_date+" "+item.start_class_time)
      arry_dates.push(item.open_date)
    });
    this.lesson_ids = lesson_idsList.join(",");
    this.leave_dates = leave_datesList.join(",");
    // 通过比较 arry_dates 元素 获取开始时间/结束时间
    if(arry_dates.length && arry_dates.length == 1){
      this.start_date = arry_dates[0];
      this.end_date = arry_dates[0];
    } else {
      arry_dates.sort(function (a, b) {
        return a-b;
      });
      this.start_date = arry_dates[0];
      this.end_date = arry_dates[arry_dates.length - 1];
    }
  },
  methods: {
    // 选课次
    goSelect() {
      let that = this;
      wx.navigateTo({
        url: `/pages/classLeaveSelect/main?goods_id=${that.goods_id}&sub_order_id=${that.sub_order_id}`
      })
    },
    // 请假原因
    changeMeg(e) {
      this.reason = e.mp.detail;
    },
    // 提交表单
    submitForm() {
      let that = this;
      if(!this.selectesNum) {
        Notify({ type: 'warning', message: '请填选择课次' });
        return
      }
      if(!this.reason) {
        Notify({ type: 'warning', message: '请填写请假原因' });
        return
      }
      this.loadingBtn = true;
      this.$fetch.addClassLeaveApplie({
        goods_id: this.goods_id,
        reason: this.reason,
        business_type: 1, // 业务(1:班课 2:1对1 3:艺体课 4:全日制)
        lesson_ids: this.lesson_ids,
        leave_dates: this.leave_dates,
        start_date: this.start_date,
        end_date: this.end_date,
      }).then(res=>{
        wx.showToast({
          title: '请假成功',
          icon: 'success',
          success: function() {
            setTimeout(() => {
              wx.redirectTo({
                url: '/pages/leaveRecord/main'
              })
              that.loadingBtn = false;
            }, 1500);
          }
        })
      }).catch(err=>{
        
      })
    }
  },
}
</script>

<style lang="less">
.pingyu{
  .van-cell{
    background: #F1F2F7 !important;
    padding: 10px 10px 5px 10px !important;
    line-height: 30px;
  }
}
</style>
<style lang="less" scope>
.change-class{
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  .change-items{
    width: 100%;
    background: #fff;
    padding: 16px 18px 0 22px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    margin: 10px 0;
    &:last-child{
      border-bottom: 0;
    }
    .top{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 30px;
    }
    .middle{
      width: 100%;
      padding: 18px 24px 15px 24px;
      box-sizing: border-box;
      font-size: 12px;
      color: #666;
    }
    .bottom{
      width: 100%;
      padding: 8px 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: row-reverse;
      .bottom-btn{
        padding: 8px 18px;
        border: 0.5px solid rgba(75,179,253,1);
        border-radius:  14px;
        font-size: 14px;
        color: #4BB3FD;
        background: #fff;
      }
      .bottom-btn2{
        padding: 8px 18px;
        border: 0.5px solid rgba(194,194,194,1);
        border-radius:  14px;
        font-size: 14px;
        color: #C2C2C2;
        background: #fff;
        margin-left: 14px;
      }
    }
    .head-name{
      width: 55px;
      margin-top: 1px;
      .head-img{
        min-width: 55px;
        width: 55px;
        height: 55px;
        border-radius: 100%;
        display: block;
      }
      .name{
        width: 100%;
        font-size: 14px;
        color: #666;
        font-weight: bold;
        text-align: center;
        margin-top: 15px;
      }
    }
    .class-infor{
      flex-grow: 1;
      margin-left: 26px;
      .class-name{
        width: 100%;
        font-size: 16px !important;
        margin-top: 0 !important;
        .class-type{
          width: 58px;
          min-width: 58px;
          height: 18px;
          line-height: 18px;
          text-align: center;
          background:rgba(0,183,238,1);
          border-radius: 4px;
          color: #fff;
          font-size: 12px;
          display: inline-block;
          margin-right: 2px;
          &.classType{
            background: #C2C2C2;
            color: #fff;
          }
        }
      }
      p{
        width: 100%;
        font-size: 12px;
        color: #666;
        overflow: hidden;
        margin-top: 10px;
        img{
          width: 16px;
          min-width: 16px;
          height: 16px;
          display: block;
          margin-right: 10px;
        }
      }
    }
  }
  .pingyu{
    width: 100%;
    padding: 18px 14px;
    box-sizing: border-box;
    background: #fff;
    margin-top: 10px;
    .title{
      width: 100%;
      font-size: 16px;
      color: #666;
      margin-bottom: 18px;
    }
    ._van-field{
      background: #F1F2F7;
    }
  }
  .qingjia-select{
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    background: #fff;
    margin-top: 8px;
    font-size: 14px;
    .title{
      display: flex;
      align-items: center;
      color: #222;
    }
    .tip{
      display: flex;
      align-items: center;
      color: #999;
    }
  }
  .submit-btn{
    width: 92%;
    margin: 40px 4%;
    border-radius:5px;
  }
}
</style>
